<template>
	<div class="shopcar-contioner">
		<div class="mui-card" v-for="item in carlist" :key="item.id">
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<mt-switch v-model="$store.getters.getSelected[item.id]" @change="changeSelected(item.id)"></mt-switch>
					<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1577450780760&di=3e7f813ec4b03096e07d29fa096816b4&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fea216c8584830aefaa63728edabb5b5ccbdbf2ca40ff8-u4akor_fw658">
					<div class="info">
					  <h1>{{item.title}}</h1>
					  <p>
						<span class="price">￥{{item.price}}</span>
						<div class="mui-numbox car-numbox" data-numbox-min='1'>
							<!-- goodinfo是异步的，有问题 我们可以 使用 watch 属性监听 -->
							<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
							<input class="mui-input-numbox" type="number" id="goodcount" :value="item.count" @change="changeCount(item.id)"/>
							<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
						</div>
						<a class="del" href="#" @click.prevent="deleteCar(item.id)">删除</a>
					  </p>
					</div>
				</div>
			</div>
		</div>
		<!-- 结算区域 -->
		<div class="mui-card">
			<div class="mui-card-content">
					<div class="mui-card-content-inner jiesuan">
						<div class="left">
							<p>总计（不含运费）</p>
							<p>已勾选商品 <span class="red">{{$store.getters.getGoodsCountAndAmount.count}}</span> 件， 总价 <span class="red">￥{{$store.getters.getGoodsCountAndAmount.amount}}</span></p>
						</div>
						<mt-button type="danger" class="js-but">去结算</mt-button>
					</div>
			</div>
		</div>
	</div>
</template>

<script>
import mui from "../lib/mui/js/mui.min.js";
import { MessageBox } from 'mint-ui';
export default{
	data(){
		return {
			carlist:[]
		}
	},
	methods:{
		getShopCarData(){
			this.$http.get("/myvue/car/list").then(res=>{
				this.carlist = res.body;
			});
		},
		changeSelected(id){
			//修改后台数据
			this.$http.post("/myvue/car/editSelected",{'id':id},{emulateJSON: true}).then(res=>{
				//修改store数据
				this.$store.commit('editSelected',id);
			});
		},
		changeCount(id){
			console.log("----------"+id);
			var count = parseInt(document.getElementById("goodcount").value);
			//修改后台数据
			this.$http.post("/myvue/car/editCount",{'id':id,'count':count},{emulateJSON: true}).then(res=>{
				//修改store数据
				this.$store.commit("editCount",{'id':id,'count':count})
			});
			
		},
		deleteCar(id){
			MessageBox({
			  title: '提示',
			  message: '确定执行此操作?',
			  showCancelButton: true
			}).then(action => {
              if(action == 'confirm'){
                console.log('确定')
				//修改后台数据
				this.$http.post("/myvue/car/delete",{'id':id},{emulateJSON: true}).then(res=>{
					//修改store数据
					this.$store.commit("deleteCar",id);
				});
              }else{
                console.log('取消')
              }
          })
			
		}
	},
	computed:{
	},
	created(){
		this.getShopCarData();
	},
	mounted() {
		// 初始化数字选择框组件
		mui(".mui-numbox").numbox();
		console.log(this.max);
	},
	watch:{
		carlist(newVal,oldVal){
			this.$store.commit('initCarData',newVal);
		}
	}
}
</script>

<style lang="scss" scoped="scoped">
	.shopcar-contioner{
		overflow: hidden;
		background-color: #eee;
	}
	
	.mui-card-content-inner{
		display: flex;
		align-items: center;
		.info{
			margin-left: 10px;
			h1{
				font-size: 14px;
			}
			.price{
				color: red;
				font-size: 15px;
				font-weight: bold;
			}
		}
		img{
			margin-left: 5px;
			width: 60px;
			height: 60px;
		}
	}
	.car-numbox{
		height: 30px;
	}
	.del{
		margin-left: 5px;
	}
	.jiesuan {
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    .red {
	      color: red;
	      font-weight: bold;
	      font-size: 16px;
	    }
	  }
	  .js-but{
		  height: 35px;
	  }
</style>
